<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <title>CSS 侧视效果</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="data:,">
  <style>
    html,body { height:100%; margin:0; background:#111; }
    #app { width:100%; height:100%; position:relative; perspective: 900px; overflow:hidden; }
    .hint { position:fixed; left:12px; bottom:12px; color:#ddd; font:12px/1.4 system-ui, -apple-system, Segoe UI, Roboto; opacity:.85 }

    /* 只用 CSS：一张图 + 透视旋转 = 侧视效果 */
    .poster {
      position:absolute; top:50%; left:50%;
      width:min(80vmin, 92vw);
      aspect-ratio: 14 / 11.2; /* 可视正面比例 */
      transform: translate(-50%,-50%) rotateY(-18deg) rotateX(2deg);
      transform-origin: center center;
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      border-radius: 2px;
    }
    /* 棉布质感（可调透明度/间距增强或减弱效果） */
    .poster::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px);
      mix-blend-mode: multiply; opacity:.35;
      border-radius: 2px;
    }
    /* 地面阴影，增加纵深感 */
    .ground{
      position:absolute; left:50%; bottom:-6vmin;
      width:120vmin; height:40vmin; transform:translateX(-50%) rotateX(80deg);
      background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 60%);
      filter: blur(6px); opacity:.6; pointer-events:none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="poster" style="background-image:url('https://cdn.shopify.com/s/files/1/0741/5129/7333/files/exam-test.jpg');"></div>
    <div class="ground"></div>
  </div>
  <div class="hint">纯 CSS 静态侧视效果（可调 .poster 的 rotateY/rotateX）</div>
</body>
</html>

